<template>
  <div>
    <!--轮播图及其分类开始-->
    <div>
      <!--轮播图上的分类前置-->
      <div class="category">
        <!--左边-->
        <div>
          <span class="el-icon-s-shop"></span>
          <p>所有分类</p>
        </div>
        <ul>
          <li v-for="(item,index) in topCategoryList"><a>{{ item }}</a></li>
        </ul>
      </div>
      <div class="block">
        <el-carousel height="480px" style="overflow: hidden">
          <el-carousel-item v-for="(img,index) in imgList" :key="index">
            <a>
              <img :src="img.src" alt="图片丢失了" style="width: 100%;height: 600px">
            </a>
          </el-carousel-item>
          <div id="category">
            <div class="category-nav">
              <!--分类详细内容-->
              <div class="content" v-for="(item,index) in categoryList" :key="index" v-show="index<2">
                <h4>{{ item.name }}</h4>
                <ul>
                  <li v-for="(c,index) in item.children">
                    <a @click="goTo('/productClassify',{id:3})">{{ c.specificClass }}</a>
                  </li>
                </ul>
                <span class="line"></span>
              </div>
              <!--分类详细内容3-->
              <div class="content forever"
                   @mouseover="mouseOver"
                   @mouseout="mouseOut"
                   v-for="(item,index) in categoryList" :key="index" v-show="index==2"
              >
                <!--隐藏的详细分类-->
                <div class="forever-right" v-show="isForever" style="display: none">
                  <div class="pop-list-top" v-for="(n,index) in item.children" :key="index" v-show="index>2">
                    <!--隐藏的永生花上部-->
                    <p>{{ n.specificClass }}</p>
                    <div class="as">
                      <a @click="goTo('categorygoods',{id:4})" v-for="(nitem,index) in n.children" :key="index">
                        <img :src="nitem.imgsrc" style="width: 80px;height: 80px" alt="">
                        <p>{{ nitem.name }}</p>
                      </a>
                    </div>
                  </div>
                </div>
                <h4>{{ item.name }}</h4>
                <span style="position:absolute;right:22px;">
                  <el-icon><ArrowRight /></el-icon>
                </span>
                <ul>
                  <li v-for="(i,index) in item.children" :key="index" v-show="index<3">
                    <a href="javascript;">{{ i.specificClass }}</a>
                  </li>
                </ul>
              </div>
              <span class="line"></span>
              <!--分类详细内容4-->
              <div class="content span" v-for="(item,index) in categoryList" v-show="index==4">
                <!--隐藏的详细分类-->
                <div class="present">
                  <div class="pop-list-top" id="present">
                    <!--隐藏的永生花上部-->
                    <p>{{ item.name }}</p>
                    <div class="as">
                      <a @click="goTo('goodsdetail')" v-for="(zitem,index) in item.children" :key="index">
                        <img :src="zitem.imgsrc" style="width: 80px;height: 80px" alt="">
                        <p>{{ zitem.name }}</p>
                      </a>
                    </div>
                  </div>
                </div>
                <span>礼品 / 装饰 / 其他</span>
                <span style="position:absolute;right:22px;">
                  <el-icon><ArrowRight /></el-icon>
                </span>
              </div>
              <span class="line"></span>
            </div>
          </div>
        </el-carousel>
      </div>
    </div>
    <!--轮播图及其分类结束-->
    <!--服务开始-->
    <div id="service">
      <div class="main-server">
        <ul>
          <li>
            <a>
              <span>
                <el-icon><GoldMedal /></el-icon>
              </span>
              <h4>全宇宙第一</h4>
            </a>
          </li>
          <li>
            <a>
              <span>
                <el-icon><Key /></el-icon>
              </span>
              <h4>16年品牌</h4>
            </a>
          </li>
          <li>
            <a>
              <span>
                <el-icon><Van /></el-icon>
              </span>
              <h4>13小时全国送花</h4>
            </a>
          </li>
          <li>
            <a>
              <span>
                <el-icon><Coin /></el-icon>
              </span>
              <h4>300%退赔承诺</h4>
            </a>
          </li>
          <li>
            <a>
              <span>
                <el-icon><ChatDotRound /></el-icon>
              </span>
              <h4>最近999999条评论</h4>
            </a>
          </li>
        </ul>
      </div>
      <div id="nav" class="right-nav" style="display: none;">
        <ul>
          <li>
            <span>
              <el-icon><Cellphone /></el-icon>
            </span>
            App/微信
          </li>
          <li @click="goTo('cart')">
            <span>
              <el-icon><ShoppingTrolley /></el-icon>
            </span>
            购物车
          </li>
          <li>
            <span>
              <el-icon><Headset /></el-icon>
            </span>
            在线客服
          </li>
          <li>
            <span>
              <el-icon><Cellphone /></el-icon>
            </span>
            联系电话
          </li>
          <li>
            <span>
              <el-icon><Microphone /></el-icon>
            </span>
            意见反馈
          </li>
          <li @click="backTop">
            <span>
              <el-icon><Top /></el-icon>
            </span>
            回顶部
          </li>
        </ul>
      </div>
    </div>
    <!--服务结束-->
    <!--新品上货开始-->
    <div class="scene clearfix" id="new">
      <div class="scene-list">
        <div class="scene-item-vertical">
          <a>
            <img src="http://lixinghe.meimeng.eu.org/flower/image/new-rexiao.png" alt="">
          </a>
          <span>热销21.6万束</span>
        </div>
      </div>
      <div class="scene-list">
        <div class="scene-item-vertical">
          <a>
            <img src="http://lixinghe.meimeng.eu.org/flower/image/new-tejia.png" alt="">
          </a>
        </div>
      </div>
      <div class="scene-list">
        <div class="scene-item-vertical">
          <a>
            <img src="http://lixinghe.meimeng.eu.org/flower/image/new-xinpin.png" alt="">
          </a>
        </div>
      </div>
      <div class="scene-list">
        <div class="scene-item-vertical">
          <a>
            <img src="http://lixinghe.meimeng.eu.org/flower/image/new-pinwei.png" alt="">
          </a>
        </div>
      </div>
    </div>
    <!--新品上货结束-->
    <!--商品展示轮播开始-->
    <div style="
    background: url(http://lixinghe.meimeng.eu.org/flower/image/b3.jpeg);
    background-size: cover;">
      <div class="lb_title">
        <p>热品爆款</p>
      </div>
      <swiper
          style="width: 1200px;
          margin: 0 auto;
          opacity: 0.8;
          padding-bottom:40px;"
          :slides-per-view="5"
          :space-between="10"
          :modules="modules"
          @swiper="onSwiper"
          :watchSlidesVisibility="true"
          :centeredSlides="true"
          @slideChange="onSlideChange"
          loop
          :navigation="option.navigation"
          :autoplay="{
          delay: 2500,
          disableOnInteraction: false,
          }"
      >
        <swiper-slide style="text-align: center" v-for="(item,index) in swiperDataList" :key="index">
          <div class="swiper_div">
            <img @click="goTo('/productDetail')" style="width:100%;height: 250px" :src="item.imgsrc" alt="">
            <p>{{ item.title }}</p>
            <p><span>￥{{ item.price }}</span><span>${{ item.primeCost }}</span></p>
            <div class="btnGroup">
              <div>立即购买</div>
              <div>加入收藏</div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!--商品展示轮播结束-->
    <!--商品展示大区开始-->
    <GoodsHome></GoodsHome>
    <!--商品展示大区结束-->
    <!--礼品开始-->
    <Gift/>
    <!--礼品结束-->

  </div>
</template>

<script>
import {reactive, toRefs,onBeforeUnmount,onMounted} from "vue";
import Gift from "@/components/commons/Gift";
import GoodsHome from "@/components/commons/GoodsHome";
//引入swiper插件
import {Navigation, Pagination, A11y,Autoplay,Scrollbar,EffectCards } from "swiper";
/*
  swiper 官方演示地址 https://swiperjs.com/demos#centered-auto
  与vue2不同的是 vue2里面的属性都放在 option里
  而vue3的话 把这些功能都单独分开了 并且要单独引入 样式也要单独引入
 */
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import 'swiper/css/effect-cards'
import router from "@/router";
import { ElMessage } from 'element-plus'
export default {
  name: "Home",
  components: {
    Swiper,
    SwiperSlide,
    Gift,
    GoodsHome
  },
  setup(){

    let data = reactive({
      //是否展示隐藏分类
      isForever:false,
      // 轮播图资源
      imgList:[
        {
          src:"http://lixinghe.meimeng.eu.org/flower/image/b5.jpg"
        },
        {
          src:"http://lixinghe.meimeng.eu.org/flower/image/b1.webp"
        },
      ],
      //鲜花下侧分类数据 此处数据应来自服务器 但因作者精力有限 直接模拟 望各位担待
      categoryList:[
        {
          name:'鲜花用途',
          children:[
            {
              //具体分类
              specificClass:'爱情之花',
            },
            {
              specificClass:'友情之花',
            },
            {
              specificClass:'商务标准',
            },
            {
              specificClass:'婚礼布置',
            },
            {
              specificClass:'问候长辈',
            },
            {
              specificClass:'探病慰问',
            },
            {
              specificClass:'表达祝贺',
            },
            {
              specificClass:'表白之花',
            },
            {
              specificClass:'节日庆典',
            },
          ]
        },
        {
          name:'鲜花花材',
          children: [
            {
              specificClass:'玫瑰',
            },
            {
              specificClass:'百合',
            },
            {
              specificClass:'康乃馨',
            },
            {
              specificClass:'向日葵',
            },
            {
              specificClass:'小雏菊',
            },
            {
              specificClass:'郁金香',
            },
            {
              specificClass:'干花',
            },
          ]
        },
        {
          name:'永生花',
          children: [
            {
              specificClass:'永生瓶华',
            },
            {
              specificClass:'经典花盒',
            },
            {
              specificClass:'专属永生花',
            },
            {
              specificClass:'永生花类别',
              children: [
                {
                  imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/forover-top1.jpg',
                  name:'永生花瓶'
                },
                {
                  imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/forover-top2.jpg',
                  name:'经典花盒'
                },
                {
                  imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/forover-top3.jpg',
                  name:'专属永生花'
                },
                {
                  imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/forover-top4.jpg',
                  name:'巨型玫瑰'
                }
              ]
            },
            {
              specificClass:'赠予人',
              children: [
                {
                  imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/grant-py.png',
                  name:'送女孩'
                },
                {
                  imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/grant-py.png',
                  name:'送男友'
                },
                {
                  imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/grant-zb.png',
                  name:'送长辈'
                },
                {
                  imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/grant-zb.png',
                  name:'送老师'
                }
              ]
            }
          ]
        },
        {
          name:'礼品 / 装饰 / 其他',
        },
        {
          name:'礼品/赠品',
          children: [
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-1.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-2.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-3.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-4.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-5.jpg',
              name:'音乐盒'
            },{
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-6.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-7.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-8.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-9.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-10.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-11.jpg',
              name:'音乐盒'
            },
            {
              imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/present-12.jpg',
              name:'音乐盒'
            },
          ]
        }
      ],
      //上面分类
      topCategoryList:[
          '鲜花',
          '永生花',
          '生日祝福',
          '现货速发',
          '花语大全',
          '爱念花',
          '情人节订购',
          '设计师臻选鲜花'
      ],
      // swiper展示数据
      swiperDataList:[
        {
          title:'小熊的话~',
          price:'99',
          primeCost:'999',
          imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/favction.jpg'
        },
        {
          title:'小兔送花~',
          price:'99',
          primeCost:'999',
          imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/favction.jpg'
        },
        {
          title:'小熊的话~',
          price:'99',
          primeCost:'999',
          imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/favction.jpg'
        },
        {
          title:'小兔送花~',
          price:'99',
          primeCost:'999',
          imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/favction.jpg'
        },
        {
          title:'小熊的话~',
          price:'99',
          primeCost:'999',
          imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/favction.jpg'
        },
        {
          title:'小兔送花~',
          price:'99',
          primeCost:'999',
          imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/favction.jpg'
        },

      ],
      //鼠标移入事件
      mouseOver(){
        data.isForever = true
      },
      // vue的鼠标移出事件
      mouseOut(){
        data.isForever = false
      },
      //路由跳转封装方法
      goTo(name,params){
        if(name==='cart'){
          if(window.sessionStorage.getItem("data")===null){
            ElMessage.warning("请先登录，在操作")
          }else {
            router.push({name:name})
          }
        }
        router.push(name)
      },
    })



    let option = reactive({
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
    })
    // 离开路由前清空onscroll的所有监听内容
    onBeforeUnmount(() => {
      window.onscroll = ()=> {
      }
    })
    //实例挂载后做的事
    onMounted(() => {
      scorll();
    })

    //高度大于700 时显示固定侧边导航栏
    function scorll(){
      window.onscroll = function(){
        if(document.body.scrollTop || document.documentElement.scrollTop>=700){
          document.getElementById("nav").style.display = "block";
        }else {
          document.getElementById("nav").style.display = "none";
        }
      }
    }

    //点击事件，点击此回到顶部
    function backTop(){
      var timer = null;
      var speed = 20;
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      timer = setInterval(function(){
        // document.documentElement.scrollTop = document.body.scrollTop - speed
        scrollTop =scrollTop - speed;
        document.documentElement.scrollTo(0,scrollTop)
        if(scrollTop <= 0){
          clearInterval(timer)
        }
      },10)
    }

    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('slide change');
    };

    return {
      ...toRefs(data),
      backTop,
      onSwiper,
      onSlideChange,
      option,
      modules: [Navigation, Pagination,Autoplay, Scrollbar, A11y,EffectCards],
    }
  },

}
</script>

<style scoped lang="scss">
li {
  list-style-type: none;
}
a {
  text-decoration: none;
  cursor: pointer;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
*{margin:0;padding:0}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 400px;
  margin: 0;
}
.category {
  height: 70px;
  width: 1200px;
  margin: 0 auto;
  div{
    width: 260px;
    height: 100%;
    line-height: 70px;
    float: left;
    border: 1px solid #F29BA5;
    background-color: #F29BA5;
    border-radius: 16px 16px 0px 0px;
    display: inline-block;
    font-size: 22px;
    text-align: left;
    color: #FFFFFF;
    &:nth-of-type(2) {
      width: 260px;
      height: 100%;
      border: 1px solid red;
    }
  }
  p {
    display: inline-block;
    font-weight: bolder;
    margin-left: 10px;
  }
  span {
    margin-top: 26px;
    margin-left: 20px;
  }
  ul {
    height: 72px;
    float: left;
    width: 880px;
    padding: 0;
    margin: 0 0 0 40px;
    line-height: 72px;
    li {
      float: left;
      list-style-type: none;
      margin-right: 15px;
      a{
        text-decoration: none;
        font-weight: bolder;
        font-size: 20px;
        color: #232628;
        &:hover {
          color: orange;
        }
      }
    }
  }
}
.block {
  /*清除浮动*/
  clear: both;
}
/*分类导航展示*/
#category {
  height: 480px;
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.category-nav {
  z-index: 2;
  position: absolute;
  width: 262px;
  height: 480px;
  background:url("http://lixinghe.meimeng.eu.org/flower/image/black-bg.png");
  div {
    color: #FFFFFF;
  }
}
/*细分类样式*/
.content {
  width: 100%;
  position: relative;
  h4{
    width: 100px;
    margin-left: 10px;
    margin-top: 20px;
  }
  ul {
    width: 220px;
    height: 60px;
    margin-left: 26px;
  }
  li {
    float: left;
    margin-top: 10px;
    font-size: 14px;
    margin-right: 10px;
  }
  a {
    color: #FFFFFF;
    &:hover {
      color: orange;
    }
  }
}
.line {
  display: inline-block;
  width: 260px;
  border: 1px dashed #947778;
}
.forever {
  height: 80px;
  margin-top: -3px;
  margin-bottom: -10px;
  &:hover {
    background-color: #FFFFFF;
    color: #2c3e50;
  }
  &:hover a {
    color: #9A9FA4;
    &:hover {
      color: orange;
    }
  }
  ul{
    height: 40px;
  }
  h4 {
    margin-top: 0px;
    padding-top: 20px;
    margin-left: 0px;
  }
  span {
    position: absolute;
    right: 20px;
    top: 22px;
  }
}
/*悬停在div上时,a的样式*/
/*悬停在div上时,a悬停的样式*/
.forever-right {
  position: absolute;
  left: 262px;
  top:-268px;
  width: 1010px;
  height: 500px;
  border-top: 1px solid #F29BA5;
  background-color: #FFFFFF;
  /*备用*/
  /*background: url("/static/images/bgforover.jpeg");*/
  /*background-size: 1000px 500px;*/
  /*透明度*/
  /*opacity: 0.5;*/
  p {
    color: #2c3e50;
    font-size: 18px;
    width: 100px;
  }
}
.pop-list-top {
  height: 180px;
  padding: 20px 20px 10px 30px;
  p {
    color: #71797F;
  }
  img {
    border-radius: 50%;
  }
  a {
    display: inline-block;
    width: 88px;
    height: 106px;
    margin-top: 30px;
    margin-right: 50px;
    p {
      width: 70px;
      margin-left: 8px;
      margin-top: 2px;
      font-size: 14px;
      &:hover {
        color: orange;
      }
    }
  }
}
.as {
  width: 700px;
  height: 160px;
}
.span {
  width: 262px;
  height: 60px;
  line-height: 60px;
  margin-top: -3px;
  margin-bottom: -12px;
  &:hover {
    color: #2c3e50;
    background-color: #FFFFFF;
  }
  &:hover span {
    color: #2c3e50;
  }
  span {
    cursor: pointer;
    &:hover {
      color: orange;
    }
  }

}


.span span:nth-of-type(1) {
  /*margin-left: -90px;*/
}
.present {
  position: absolute;
  display: none;
  left: 262px;
  top: -356px;
  width: 1010px;
  height: 500px;
  border-top: 1px solid #F29BA5;
  background-color: #FFFFFF;
}
.span:hover .present {
  display: block;
}
#present {
  height: 600px;
  p{
    font-size: 16px;
    width: 100px;
  }
  a {
    margin-top: 70px;
  }
  .as {
    width: 1000px;
    height: 400px;
    p {
      width: 80px;
      height: 30px;
      font-size: 14px;
      line-height: 30px;
      margin-left: 0;
      text-align: center;
      margin-top: -22px;
    }
  }
}

/*服务样式*/
#service {
  height: 60px;
}
.main-server {
  margin: 0 auto;
  width: 1200px;
  height: 100%;
  padding: 20px 0;
  li {
    float: left;
    h4 {
      display: inline-block;
      color: #F29BA5;
      font-size: 18px;
      line-height: 60px;
      font-weight: 500;
    }
  }
  ul {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  span {
    color: #F29BA5;
    font-size: 30px;
  }
  a {
    display: flex;
    align-items: center;
  }
}
/*场景入口样式*/
.scene {
  width: 1200px;
  margin: 30px auto 60px;
  height: 376px;
  font-size: 0;
}
#new {
  height: 172px;
}
.scene-list {
  float: left;
  width: 288px;
  border-radius: 8px;
  overflow: hidden;
}
.scene-item-vertical {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  span {
    position: absolute;
    left: 16px;
    bottom: 20px;
    font-size: 16px;
    color: #71797f;
    line-height: 20px;
  }
}
.scene .scene-list + .scene-list {
  margin-left: 16px;
}
.scene-item-horizontal {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.scene-item-vertical-mini {
  display: inline-block;
  width: 136px;
  border-radius: 8px;
  overflow: hidden;
}
.scene .scene-item-horizontal + .scene-item-horizontal {
  margin-top: 16px;
}
.scene .scene-item-vertical-mini + .scene-item-vertical-mini {
  margin-left: 16px;
}

/* 右侧固定导航 */
.right-nav {
  width: 80px;
  position: fixed;
  top: 100px;
  opacity: 0.8;
  right: 20px;
  height: 400px;
  font-size: 14px;
  background: white;
  border-radius: 10px;
  z-index: 10;
  padding: 5px;
  box-shadow: rgba(0,0,0,0.2) 0px 4px 8px 0px, rgba(0,0,0,0.2) 0px 6px 20px 0px;
  li {
    position: relative;
    height: 66px;
    line-height: 90px;
    border-bottom: 1px solid #F29BA5;
    font-size: 12px;
    color: #F29BA5;
    cursor: pointer;
    text-align: center;
    span {
      display: block;
      font-size: 40px;
      top: -20px;
      left: 20px;
      position: absolute;
      color: #F29BA5;
    }
  }
  li:last-of-type {
    border: 0;
  }

}
.swiper_div {
  border-radius: 10px;
  width: 210px;
  cursor: pointer;
  background: #fffcf7;
  .btnGroup {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    div{
      width: 50%;
      height: 100%;
      line-height: 30px;
      font-size: 14px;
      border-right: 1px solid red;
      &:nth-of-type(2) {
        border-right: 0;
      }
    }
  }
  p {
    margin: 10px 0;
    font-size: 14px;
    overflow: hidden;
  }
}
.lb_title {
  padding: 20px 30px;
  font-size: 20px;
  color: snow;
  font-weight: bolder;
}
</style>
